
layui.use(['jquery', 'layer', 'form', 'table', 'laydate'], function () {
var $ = layui.$,
layer = layui.layer,
form = layui.form,
table = layui.table,
laydate = layui.laydate;

// 时间戳的处理
layui.laytpl.toDateString = function(d, format){
var date = new Date(d || new Date())
,ymd = [
this.digit(date.getFullYear(), 4)
,this.digit(date.getMonth() + 1)
,this.digit(date.getDate())
]
,hms = [
this.digit(date.getHours())
,this.digit(date.getMinutes())
,this.digit(date.getSeconds())
];

format = format || 'yyyy-MM-dd HH:mm:ss';

return d ? format.replace(/yyyy/g, ymd[0])
.replace(/MM/g, ymd[1])
.replace(/dd/g, ymd[2])
.replace(/HH/g, hms[0])
.replace(/mm/g, hms[1])
.replace(/ss/g, hms[2]) : '';
};
// 数字前置补零
layui.laytpl.digit = function(num, length, end){
var str = '';
num = String(num);
length = length || 2;
for(var i = num.length; i < length; i++){
str += '0';
}
return num < Math.pow(10, length) ? str + (num|0) : num;
};
// 渲染数据表格
table.render({
elem : '#dataTable'
,url : '/admin/wh/detail'
,cellMinWidth: 80
,page: {
prev: '上一页',
next: '下一页',
layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
}
,method:'post'
// ,toolbar: 'default'  // 开启顶部工具栏（默认模板）
,toolbar: '#toolbar' // 指定顶部工具栏模板
// ,even: true  // 隔行背景
,title: '表'  // 表格标题，用户导出数据文件名
,text: {  // 指定无数据或数据异常时的提示文本
none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
}
,where:{'start_time':'2023-12-29', 'end_time':'2023-12-29'}
,id: 'dataTable'
,cols: [[  // 表格列标题及数据
{title: '#', type: 'numbers'}
,{checkbox: true}
,{field: 'id', width: 60, title: 'ID', sort: true, align: 'center'}
,{field: 'luyin', width: 100, title: '录音', align: 'center', templet:function(data) {
if (data.record) {
return '<audio id="audio_'+data.id+'" src="'+data.record+'" style="display:none;"></audio><a href="javascript:void(0);"><i class="layui-icon" onclick="playMusic(\'audio_'+data.id+'\', this)">&#xe652;</i></a>&nbsp;&nbsp;<a download target="_blank" href="'+data.record+'?response-content-type=application/octet-stream"><i class="layui-icon">&#xe601;</i></a>';
} else {
return '';
}
}}
,{field: 'user', width: 100, title: '员工姓名', align: 'center', templet:function(data) {
if (data.user) {
return data.user.name;
} else {
return '';
}
}}
,{field: 'from', width: 120, title: '主叫', align: 'center'}
,{field: 'ecpid', width: 120, title: '小号', align: 'center'}
,{field: 'to', width: 130, title: '被叫', align: 'center'}
,{field: 'status', width: 100, title: '状态', align: 'center', templet:function(data) {
if (data.status == 0) {
return '拨打失败';
} else if (data.status == 1) {
return '拨出';
} else if(data.status == 2) {
return '主叫接通';
} else if(data.status == 3) {
return '被叫接通';
}
}}
,{field: 'stateCode', width: 200, title: '状态明细', align: 'center'}
,{field: 'start_time', width: 170, title: '主叫接通时间', align: 'center',templet: '<div>{{ layui.laytpl.toDateString(d.start_time*1000) }}</div>'}
,{field: 'to_time', width: 170, title: '被叫接通时间', align: 'center',templet: '<div>{{ layui.laytpl.toDateString(d.to_time*1000) }}</div>'}
,{field: 'end_time', width: 170, title: '结束时间', align: 'center',templet: '<div>{{ layui.laytpl.toDateString(d.end_time*1000) }}</div>'}
,{field: 'create_time', width: 170, title: '创建时间', align: 'center'}
]], done() {
var role = "1";
if (role != "1") {
$(".layui-table").find("[data-field='stateCode']").css("display","none");
$(".layui-table").find("[data-field='ecpid']").css("display","none");
}
//日期范围
laydate.render({
elem: '#test6'
//设置开始日期、日期日期的 input 选择器
//数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
,range: ['#startDate', '#endDate']
});
}
});
form.on('select(branch_id)',function(data) {
$.ajax({
url: '/admin/wh/getuser.html',
type: 'POST',
dataType: 'json',
data: {
'branch_id':data.value
},
success: function( data ){
var html = '';
html += '<option value="">请选择员工</option>';
if (data.length > 0) {
for (let index = 0; index < data.length; index++) {
html += '<option value="'+data[index].id+'">'+data[index].name+'</option>';
}
}
$("#user").html(html)
form.render();
}
});
});
//头工具栏事件
table.on('toolbar()', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
var ids = [];
for (key in checkStatus.data) {
ids[key] = checkStatus.data[key].id
}

switch(obj.event){
case 'end':
if (ids.length == 0) {
layer.msg('请选择通话', {
time: 1000
});
return false;
}
endWh(ids);
break;
};
});
// 搜索功能
var active = {
reload: function(){
var start_time = $('#startDate').val();
var end_time = $('#endDate').val();
var status = $('#status').val();
var branch_id = $('#branch_id').val();
var user = $('#user').val();
var from = $('#from').val();
var ecpid = $('#ecpid').val();
var to = $('#to').val();
var true_time = $('#true_time').val();
var true_time_type= $("#true_time_type").val()
$.ajax({
url: '/admin/wh/getuser.html',
type: 'POST',
dataType: 'json',
data: {
'branch_id':branch_id
},
success: function( data ){
var html = '';
html += '<option value="">请选择员工</option>';
if (data.length > 0) {
for (let index = 0; index < data.length; index++) {
if (data[index].id == user) {
html += '<option value="'+data[index].id+'" selected>'+data[index].name+'</option>';
} else {
html += '<option value="'+data[index].id+'">'+data[index].name+'</option>';
}
}
}
$("#user").html(html)
form.render();
}
});
//执行重载
table.reload('dataTable', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
'start_time': start_time,
'end_time': end_time,
'status': status,
'branch_id': branch_id,
'from':from,
'ecpid':ecpid,
'to': to,
'true_time':true_time,
'user':user,
'true_time_type' :true_time_type
}
}, 'data');
$('#startDate').val(start_time);
$('#endDate').val(end_time);
$('#status').val(status);
$('#branch_id').val(branch_id)
$('#from').val(from);
$('#ecpid').val(ecpid)
$('#to').val(to)
$('#true_time').val(true_time)
$('#user').val(user)
$("#true_time_type").val(true_time_type)


}
};
$('body').on('click','.search-btn', function(){
var audio = $('.layui-table audio');
for (var i =0 ;i < audio.length; i++) {
audio[i].pause();
audio[i].currentTime = 0;
$("#"+audio[i].id).next().children().html('&#xe652;');
}
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
function playMusic(id, that) {

var audioEle = document.getElementById(id);
if (audioEle.paused){ /*如果已经暂停*/
var audio = $('.layui-table audio');
for (var i =0 ;i < audio.length; i++) {
audio[i].pause();
// audio[i].currentTime = 0;
$("#"+audio[i].id).next().children().html('&#xe652;');
}
audioEle.play();   //播放
// audioEle.onloadedmetadata = function () {
//     audioEle.play();   //播放
// };
$(that).html('&#xe651;');
audioEle.loop = false;
audioEle.addEventListener('ended', function () {
$(that).html('&#xe652;');
}, false);
}else {
audioEle.pause();  //暂停
// audioEle.currentTime = 0;
$(that).html('&#xe652;');
}

}
